<template>
  <div>
    <h2>显示页面</h2>
    <table >
      <tbody>
        <tr>
          <td>
            名称：<input type="text" v-model="start.name" />
            <button @click="getshow">查询</button>
            <button @click="Add">添加</button>
          </td>
        </tr>
      </tbody>
    </table>
    <table class="table table-bordered">
      <tbody>
        <tr class="bg bg-primary">
          <td>名称</td>
          <td>状态</td>
          <td>详情</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in showquan">
          <td>{{ item.name }}</td>
          <td>{{ item.zhuangtai }}</td>
          <td>{{ item.xingqing }}</td>
          <td>
            <a @click="upquan(item.id)" style="color: red">修改</a>
            <a @click="delquan" style="color: blue">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
    <table>
      <tbody>
        <tr>
          <td>
            <button class="btn btn-primary" @click="show('a')">上一页</button>
            <button class="btn btn-primary" @click="show('b')">下一页</button>
            <button class="btn btn-primary" @click="show('c')">首页</button>
            <button class="btn btn-primary" @click="show('d')">尾页</button>
            共{{ count }}条，当前第{{ start.index }}/{{ start.size }},共有{{sum}}页
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, toRefs } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import "bootstrap/dist/css/bootstrap.min.css";
const router = useRouter();
const showquan=ref([])
const form:any=reactive({
    start:{
        name:'',
        index:1,
        size:2
    },
    list:[],
    count:0,
    sum:0
})
const {start,list,count,sum}=toRefs(form);
const getshow=()=>{
    let obj={
        name:start.value.name,
        index:start.value.index,
        size:start.value.size
    }
    console.log(obj.index);
    axios.get("https://localhost:7189/api/quanyi/Showquan?name="+obj.name+"&index="+obj.index+"&size="+obj.size).then(res=>{
        showquan.value=res.data.data;
        count.value=res.data.count;
        sum.value=res.data.sum;
    }).catch(err=>{
      console.log(err);
    })

}
const show=(e)=>{
      switch(e){
        case 'a':
          if(start.value.index==1){
            alert("已经是第一页了")
            break;
          }
          start.value.index-=1
          break;
        case 'b':
          if(start.value.index==sum.value){
            alert("已经是最后一页")
            break;
          }
          start.value.index+=1
          break;
        case 'c':
          if(start.value.index==1){
            alert("已经是首页了")
            break;
          }
          start.value.index=1
          break;
        case 'd':
          if(start.value.index==sum.value){
            alert("已经是最后一页")
            break;
          }
          start.value.index=sum.value
          break;

      }
      getshow();
}


onMounted(()=>{
    getshow();
})
</script>

<style scoped></style>
